<template>
  <view class="page-container" :class="currentTheme">
     <custom-tab-bar/>
    <!-- 顶部用户信息区 -->
    <view class="header">
      <image class="avatar" :src="avatarUrl" mode="widthFix" @click="gotouser"></image>
      <view class="user-info">
        <text class="nickname" @click="gotouser">{{ nickname }}</text>
      </view>
      <!-- 主题切换按钮 - 设置图标样式 -->
      <ThemeToggle 
        :currentTheme="currentTheme" 
        @theme-change="handleThemeChange"
        size="small"
        position="right"
        :showAsIcon="true"
      />
    </view>

    <!-- 统计数据区域 - 替代原功能导航栏 -->
    <view class="stats-container">
      <view class="stat-item">
        <text class="stat-num">{{ deliveryCount }}</text>
        <text class="stat-text">发布的岗位</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ interviewCount }}</text>
        <text class="stat-text">接收的简历</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ collectCount }}</text>
        <text class="stat-text">公司的总浏览量</text>
      </view>
    </view>
<!-- 自定义左右分布标签栏 -->
<view class="custom-tabs">
  <view 
    class="tab-item left-tab" 
    :class="{ active: currentTab === 0 }" 
    @click="switchTab(0)">
    岗位发布信息
  </view>
  <view 
    class="tab-item right-tab" 
    :class="{ active: currentTab === 1 }" 
    @click="switchTab(1)">
    学生投递简历
  </view>
</view>

  <!-- 内容区域 -->
<view class="content-area">
  <!-- 岗位发布信息内容 -->
  <postJob v-if="currentTab === 0" />
  <!-- 学生投递简历内容 -->
  <studentSubmit v-if="currentTab === 1" />
</view>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import postJob from "./component/postJob.vue"
import studentSubmit from "./component/studentSubmit.vue"
import ThemeToggle from "@/components/ThemeToggle.vue"
import { getCount } from "@/api/userInformation";

export default {
  components: {
    postJob,
    studentSubmit,
    ThemeToggle
  },
  data() {
    return {
      deliveryCount: 0,
      interviewCount: 0,
      collectCount: 0,
      currentTheme: 'theme1', // 修改为与其他页面一致的主题名称

      // 标签栏 (使用uview的格式)
      tabList: [
        { name: "岗位发布信息" },
        { name: "学生投递简历" },
      ],
      currentTab: 0,
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
    avatarUrl() {
      return this.userInfo?.avatar;
    },
    nickname() {
      return this.userInfo?.enterpriseName || '未登录';
    },
  },
  onLoad() {
    // 加载保存的主题设置
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
    
    this.queryEmployInfo();
    this.fetchCountData();
  },
  onShow() {
    // 重新加载主题设置，确保主题同步
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
  },
  methods: {
    ...mapActions(['queryEmployInfo']),

    async fetchCountData(){
      const res =await getCount();
      if(res.code === 200){
        this.deliveryCount = res.data.jobNum;
        this.interviewCount = res.data.resumeNum;
        this.collectCount = res.data.browseNum;
      }

    },

    // 主题切换处理方法
    handleThemeChange(newTheme) {
      this.$nextTick(() => {
        this.currentTheme = newTheme;
        // 保存主题到localStorage，确保其他页面能够同步
        uni.setStorageSync('currentTheme', newTheme);
      });
    },

    // 切换标签
switchTab(index) {
  if (this.currentTab === index) return;
  this.currentTab = index;
},

    // 去职位列表
    gotouser() {
      uni.navigateTo({ url: "/employPages/employMine/employerData/employerData" });
    },
  },
};
</script>
<style scoped>
/* 全局样式 */
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 100rpx;
}

/* 顶部用户信息区 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 24rpx;
  /* background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%); */
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  border: 4rpx solid #ffffff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}
.user-info {
  flex: 1;
}
.nickname {
  font-size: 36rpx;
  font-weight: 600;
  color: #1d2129;
  display: block;
}
.resume-btn {
  background-color: #0084ff;
  color: #ffffff;
  font-size: 26rpx;
  padding: 18rpx 36rpx;
  border-radius: 60rpx;
  border: none;
  line-height: 1;
  box-shadow: 0 4rpx 10rpx rgba(0, 132, 255, 0.3);
}
.resume-btn::after {
  border: none;
}

/* 统计数据容器 */
.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 0;
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.stats-container .stat-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  position: relative;
}
/* 添加分割线 */
.stats-container .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rpx;
  height: 60rpx;
  background-color: #f0f0f0;
}
.stats-container .stat-num {
  font-size: 40rpx;
  color: #0084ff;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10rpx;
  display: block;
}
.stats-container .stat-text {
  font-size: 28rpx;
  color: #4e5969;
}

/* 自定义标签栏样式 */
.custom-tabs {
  display: flex;
  height: 80rpx;
  /* background-color: #ffffff; */
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  /* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #86909c;
  position: relative;
  transition: all 0.3s;
}

.tab-item.active {
  color: #0084ff;
  font-weight: 600;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 4rpx;
  background-color: #0084ff;
  border-radius: 2rpx;
}

/* 添加分割线 */
.tab-item.right-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rpx;
  height: 60%;
  background-color: #f0f0f0;
}

/* 主题样式 */
/* Theme1 - 蓝色主题 */
.theme1 .page-container {
  background-color: #F8FBFF;
}

.theme1 .header {
  background: linear-gradient(135deg, #4A90E2 0%, #E8F4FD 100%);
}

.theme1 .nickname {
  color: #2C3E50;
  font-weight: 600;
}

.theme1 .stats-container {
  background-color: #FFFFFF;
  border: 1px solid #E8F4FD;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.08);
}

.theme1 .stat-num {
  color: #4A90E2;
  font-weight: 600;
}

.theme1 .stat-text {
  color: #5A6C7D;
}

.theme1 .custom-tabs {
  background-color: #FFFFFF;
  border: 1px solid #E8F4FD;
}

.theme1 .tab-item {
  color: #5A6C7D;
}

.theme1 .tab-item.active {
  color: #4A90E2;
  font-weight: 600;
}

.theme1 .tab-item.active::after {
  background-color: #4A90E2;
}

/* Theme2 - 棕色/米色主题 */
.theme2 .page-container {
  background-color: #FDF8F3;
}

.theme2 .header {
  background: linear-gradient(135deg, #A0522D 0%, #F5E6D3 100%);
}

.theme2 .nickname {
  color: #3E2723;
  font-weight: 600;
}

.theme2 .stats-container {
  background-color: #FFFBF7;
  border: 1px solid #F5E6D3;
  box-shadow: 0 4rpx 16rpx rgba(160, 82, 45, 0.08);
}

.theme2 .stat-num {
  color: #A0522D;
  font-weight: 600;
}

.theme2 .stat-text {
  color: #6D4C41;
}

.theme2 .custom-tabs {
  background-color: #FFFBF7;
  border: 1px solid #F5E6D3;
}

.theme2 .tab-item {
  color: #6D4C41;
}

.theme2 .tab-item.active {
  color: #A0522D;
  font-weight: 600;
}

.theme2 .tab-item.active::after {
  background-color: #A0522D;
}

/* 禁用动画和过渡效果 */
* {
  transition: none !important;
  animation: none !important;
}
</style>